<template>
  <div>
    <div v-for="item in newsList" :key="item.id" class="fa">
      <van-card
        :desc="'发表时间：'+item.add_time.substring(0,10)"
        :title="item.title"
        :thumb="item.img_url"
        @click="goDetail(item.id)"
      />
      <div class="clicksum">点击数量：{{item.click}}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      newsList: []
    }
  },
  created() {
    this.getNewsList()
  },
  methods: {
    async getNewsList() {
      const { data: res } = await this.$http.get('/api/getnewslist')
      if (res.status !== 0) {
        return
      }
      this.newsList = res.message
    },
    goDetail(id) {
      this.$router.push('/news/detail/' + id)
    }
  }
}
</script>
<style scoped>
.van-card {
  height: 68px !important;
  margin: 0 8px 0 !important;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  padding: 0 16px;
}
.van-card__thumb {
  width: 66px !important;
  height: 66px !important;
  overflow: hidden;
}
.van-card__content {
  min-height: 58px !important;
  margin-top: 0;
}
.van-card__desc {
  position: absolute;
  display: inline-block;
  bottom: 5px;
  color: blue;
  font-size: 10px;
}
.van-card__title {
  margin-top: 5px;
}
.van-card__num {
  margin-bottom: 5px;
}
.fa{
  position: relative;
}
.clicksum{
   position: absolute;
   z-index: 1;
   bottom: 8px;
   right: 10px;
}
.van-hairline--top-bottom{
  z-index: 3;
}
</style>
